<template>
	<view class="loginBox">
		<login-navigation-bar title="登录"></login-navigation-bar>

		<view class="contentBox default-bgcolor">
			<bottom-rect type="login"></bottom-rect>
			<!-- 登录页面区域盒子 -->
			<view class="loginForm">
				<text class="title main-font-color">韶大失物招领平台</text>

				<form class="submitContentBox" @submit="login">
					<!-- 账号 -->
					<view class="student_ID">
						<text class="main-font-color font-weight-bold">账号</text>
						<input type="number" v-model="student_ID" @input="checkIDLegal" name="student_ID"
							placeholder-class="input" placeholder="请输入学号" />
						<text class="IDnotice" v-show="!isIDCorrect">*请输入正确的学号</text>
					</view>

					<!-- 密码 -->
					<view class="password">
						<text class="main-font-color font-weight-bold">密码</text>
						<input :password="!eyeFlag" v-model="password" name="password" @input="checkPasswordLegal"
							placeholder-class="input" placeholder="请输入密码" />
						<text class="passwordNotice" v-show="!isPasswordCorrect">*密码8-16位且至少同时包含字母、数字、特殊字符</text>
						<uni-icons class="isLookable" :type="[eyeFlag==true ?'eye':'eye-slash']" color="#999999"
							size="24" @click="changeLookPassword"></uni-icons>
					</view>

					<!-- 登录按钮 -->
					<button :class="[!canLogin ? 'disable' : 'loginBtn']" :disabled="!canLogin" hover-class="btn-click"
						form-type="submit">登录</button>
				</form>
			</view>
		</view>

	</view>
</template>

<script>
	import loginNavigationBar from '@/components/login_navigationBar/login_navigationBar.vue'
	import bottomRect from '@/components/bottomRect/bottomRect.vue'

	import {
		setTokenStorage
	} from '@/subpkg/tim/utils/token.js';
	import logger from '@/subpkg/tim/utils/logger.js';
	import {
		genTestUserSig
	} from '@/subpkg/tim/debug/GenerateTestUserSig.js';
	const {
		getTokenStorage
	} = require('@/subpkg/tim/utils/token.js');
	const app = getApp()

	export default {
		name: 'login',
		components: {
			loginNavigationBar,
			bottomRect
		},
		data() {
			return {
				// 眼睛的样式变换
				eyeFlag: false,
				// 学号
				student_ID: '',
				// 学号是否合法
				isIDCorrect: true,
				// 密码
				password: '',
				// 密码是否合法
				isPasswordCorrect: true,
				// 登录按钮是否可以点击
				canLogin: false
			}
		},
		methods: {
			// 判断用户是否有登录历史并且跳转到相应页面
			hadLginHistory(info) {
				if (info.result[0] && info.result[1].nickname != '') {
					// 如果账号密码正确且昵称不为空
					// 向全局数据增加用户信息
					app.globalData.userInfo = info.result[1]
					// 把用户信息存入本地缓存中
					uni.setStorageSync('userInfo', info.result[1])
					this.tim_login().then(() => {
						// 直接进入首页
						uni.switchTab({
							url: '/pages/index/index'
						})
					})
				} else if (info.result[0] && info.result[1].nickname == '') {
					// 如果账号密码正确但是昵称为空
					// 向全局数据增加用户信息
					app.globalData.userInfo = info.result[1]
					// 把用户信息存入本地缓存中
					uni.setStorageSync('userInfo', info.result[1])
					// 进入下一步
					uni.navigateTo({
						url: '/pages/login/changePassword'
					})
				} else {
					// 如果账号密码错误
					uni.showToast({
						title: '账号或密码错误',
						icon: 'error'
					})
				}
			},

			// tim - 登录
			tim_login() {
				return new Promise(resolve => {
					const userID = app.globalData.userInfo.userID;
					const userSig = genTestUserSig(userID).userSig;
					const SDKAppID = app.globalData.SDKAppID;
					logger.log(`TUI-login | login  | userSig:${userSig} userID:${userID}`);
					uni.$aegis.reportEvent({
						name: 'platform',
						ext1: 'platform-MP-WEIXIN',
						ext2: 'uniTuikitExternal',
						ext3: `${SDKAppID}`,
					})
					app.globalData.TIMuserInfo = {
						userSig,
						userID
					};
					setTokenStorage({
						TIMuserInfo: app.globalData.TIMuserInfo
					});
					wx.setStorageSync(`TIM_${getApp().globalData.SDKAppID}_isTUIKit`, true);
					uni.$TUIKit.login({
						userID: userID,
						userSig: userSig
					}).then(() => {
						uni.$aegis.reportEvent({
							name: 'login',
							ext1: 'login-success',
							ext2: 'uniTuikitExternal',
							ext3: `${SDKAppID}`,
						})
					}).catch((error) => {
						uni.$aegis.reportEvent({
							name: 'login',
							ext1: `login-failed#error:${error}`,
							ext2: 'uniTuikitExternal',
							ext3: `${SDKAppID}`,
						})
					})
					resolve()
				})
			},

			// 登录
			login(e) {
				uni.showLoading({
					title: '登录中...',
					mask: true
				})
				// 获取表单数据
				const {
					student_ID,
					password
				} = e.detail.value

				// 调用云函数登录
				wx.cloud.callFunction({
						name: 'user_login',
						data: {
							student_ID,
							password
						}
					})
					.then(res => {
						console.log(res);
						uni.hideLoading()
						this.hadLginHistory(res)
					})

			},

			// 切换密码是否可见
			changeLookPassword() {
				this.eyeFlag = !this.eyeFlag
			},

			// 检查学号是否合法
			checkIDLegal() {
				if (this.student_ID == '' || this.student_ID.length == 11) {
					this.isIDCorrect = true
				} else {
					this.isIDCorrect = false
				}
				this.canULogin()
			},

			// 检查密码是否合法
			checkPasswordLegal() {
				// 正则判断式
				const reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{8,16}$/i
				const result = reg.test(this.password)
				if (this.password == '' || result) {
					this.isPasswordCorrect = true
				} else {
					this.isPasswordCorrect = false
				}
				this.canULogin()
			},

			// 登录按钮是否弃用
			canULogin() {
				if (this.student_ID.trim().length != 0 && this.password.trim().length != 0 && this.isIDCorrect == true &&
					this.isPasswordCorrect == true) {
					this.canLogin = true
				} else {
					this.canLogin = false
				}
			}
		},
		onShow() {
			// 清空数据
			this.student_ID = ''
			this.password = ''
		}
	}
</script>

<style scoped lang="scss">
	// 登录页面的输入框样式
	/deep/ .input {
		font-size: 32rpx;
		color: #999999;
	}

	// 按钮弃用样式
	.disable {
		background-color: #7db1ff;
		color: white;
	}

	.contentBox {
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;

		.loginForm {
			overflow: hidden;
			background-color: white;
			width: 700rpx;
			height: 1000rpx;
			border-radius: 20rpx;
			box-shadow: 0 0 8px #b8b8b8;
			margin-top: -90rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			// 标题
			.title {
				font-size: 50rpx;
				font-weight: bold;
				margin-top: 104rpx;
			}

			// 表单
			.submitContentBox {
				margin-top: 80rpx;
				width: 580rpx;

				// 账号
				.student_ID {
					display: block;
					margin-bottom: 60rpx;
					font-size: 40rpx;
					position: relative;

					input {
						border-bottom: 1rpx solid #EFEFEF;
						padding: 14rpx 0;
						font-size: 36rpx;
					}

					.IDnotice {
						position: absolute;
						color: #E65F59;
						font-size: 32rpx;
					}

				}

				// 密码
				.password {
					display: block;
					margin-bottom: 100rpx;
					font-size: 40rpx;
					position: relative;

					input {
						border-bottom: 1rpx solid #EFEFEF;
						padding: 14rpx 0;
						font-size: 36rpx;
					}

					.passwordNotice {
						position: absolute;
						color: #E65F59;
						font-size: 32rpx;
					}

					.isLookable {
						position: absolute;
						top: 70rpx;
						left: 90%;
						z-index: 10;
					}
				}

				// 登录按钮
				button::after {
					border: none;
				}

				.loginBtn {
					width: 580rpx;
					height: 90rpx;
					background-color: #007aff;
					color: white;
					border-radius: 16rpx;
				}

				.btn-click {
					background-color: #0062cc;
				}
			}
		}
	}
</style>
